<template>
	<view class="content">
		<swiper class="topSwiper" indicator-dots autoplay circular>
			<swiper-item v-for="(item, index) in productList" :key="index" class="topSwiperItem"
				@click="goProduct(item.id)">
				<image :src="item.url" class="topSwiperImage" />
			</swiper-item>
		</swiper>
		<view class="aboutPage" @click="goAbout">
			<view class="aboutTitle">
				公司简介
			</view>
			<view class="aboutWe">
				<view class="aboutInfo">
					<view>PEK transmission parts Co., Ltd.是意大利罗隆公司技术支持的中国合资企业，PEK专业生产直线导轨驱动系统、滚珠螺杆、精密工作台及高精密主轴和精密齿轮齿条。</view>
					<view>PEK直线传导系列产品广泛用于机床、汽车、橡胶、包装、工业机器人、半导体制造装置、医疗器械、以及其他各种电子控制机器等行业，通过了SGS的ROHS认证。</view>
					<view>济南瑞动精密传动设备有限公司是意大利PEK公司在中国地区授权经销商，主要负责PEK产品系列的销售及服务。公司拥有一支专业的团队，建立了完整的技术服务体系，利用强大的资源网络及十余年的专业经验为客户进行直动及高精品的选型、分析、有效的为客户降低了成本。</view>
					<view>济南瑞动以质优、专业、高效的经营理念，愿与广大客户建立持久共赢的合作。</view>
				</view>
			</view>
		</view>
		<view class="productList">
			<view class="scrollProduct childProduct">
				<view class="goProductCenter" @click="goProductCenter">
					查看全部产品▸
				</view>
				<view class="productListTitle">
					产品列表
				</view>
				<scroll-view scroll-x class="productListScroll">
					<view class="productListItem" v-for="item in productList" :key="item.id" @click="goProduct(item.id)">
						<image class="productListImage" :src="item.url" mode="scaleToFill" />
					</view>
				</scroll-view>
			</view>
			<view class="moreProduct childProduct">
				<view class="productListTitle">
					更多产品
				</view>
				<view class="moreList">
					<view class="moreItem" v-for="(item, index) in productList" :key="index" @click="goProduct(item.id)">
						<view class="mItemHeader">
							<image :src="item.url" class="mItemImage" />
						</view>
						<view class="mItemBody">
							<view class="mItemTitle">
								{{ item.title }}
							</view>
							<view class="mItemType">
								{{ item.form }}
							</view>
						</view>
					</view>
				</view>
				<view class="noMoreProduct" @click="goProductCenter">
					查看全部产品▾
				</view>
			</view>
		</view>
		<callWe></callWe>
	</view>
</template>

<script>
import { get, post } from '@/static/js/request.js'
export default {
	data() {
		return {
			swiperList: [],
			productList: [],
			moreProductList: [],
		};
	},
	onLoad() {
		this.inCreate()
	},
	methods: {
		async inCreate() {
			await this.getSwiper()
			await this.getMoreProduct()
		},
		//获取产品列表横拉框的产品
		async getSwiper() {
			await get('product/random?size=6').then(res => {
				this.productList = res.result
			})
		},
		//获取产品列表更多的产品
		async getMoreProduct() {
			let ids = []
			this.productList.forEach(element => {
				ids.push(element.id)
			});
			await post('product/randomQuery?size=6', ids).then(res => {
				this.moreProductList = res.result
			})
		},
		// 前往产品中心
		goProductCenter() {
			uni.switchTab({ url: '/pages/tabbar/productCenter/productCenter' })
		},
		// 前往产品详情
		goProduct(id) {
			uni.navigateTo({
				url: "/pages/product/product?productId=" + id
			})
		},
		//前往公司简介
		goAbout() {
			uni.switchTab({
				url: "/pages/tabbar/about/about"
			})
		}
	}
};
</script>

<style>
* {
	font-family: 微软雅黑, "Microsoft YaHei", SimHei, FangSong, Arial, Helvetica, sans-serif !important;
}

.topSwiper {
	width: 95%;
	height: 400rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin: 0 auto;
}

.topSwiperItem {
	width: 100%;
	height: 100%;
	background: gray;
}

.topSwiperImage {
	background-image: url(http://www.peklm.cn/images/bg/content-1/bg-content-1-list.png);
	background-size: cover;
	width: 100%;
	height: 100%;
}

.productList {
	margin: 20rpx auto;
	background: linear-gradient(rgb(179, 6, 17, .2), white);
	width: 100%;
	border-radius: 50rpx 50rpx 0 0;
	height: 400rpx;
}

.childProduct {
	width: 95%;
	padding-top: 30rpx;
	margin: 0 auto;
}

.productList>* {
	width: 95%;
	margin: 0 auto;
}

.productListTitle {
	font-size: 36rpx;
	font-weight: bold;
	border-bottom: 2px solid;
	border-image: linear-gradient(to right, #8a8a8a, #a7a6a6, rgb(236, 236, 236), rgb(236, 236, 236)) 1;
	width: 4cm;
}

.productListItem {
	margin: 10rpx 0;
	display: inline-block;
	width: 150rpx;
	margin-right: 16rpx;
	height: 150rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.productListImage {
	background-image: url(http://www.peklm.cn/images/bg/content-1/bg-content-1-list.png);
	background-size: cover;
	width: 100%;
	height: 100%;
}

.goProductCenter {
	position: absolute;
	right: 3%;
	font-size: 28rpx;
	width: max-content;
	margin: 0 auto;
	text-align: center;
	color: #d61223;
	border: 1px solid #d61223;
	background: #d6122311;
	padding: 6rpx 10rpx;
	border-radius: 24rpx;
}

.aboutPage {
	margin: 0 auto;
	margin-top: 40rpx;
	height: 400rpx;
	width: 93%;
	position: relative;
	left: -10rpx;
	border: 1px solid transparent;
}

.aboutTitle {
	position: absolute;
	top: 0;
	left: 20%;
	width: 60%;
	height: 80rpx;
	color: white;
	font-weight: bold;
	letter-spacing: 4rpx;
	font-size: 36rpx;
	margin: 0 auto;
	background: #b30611;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 20rpx;
	z-index: 2;
}

.aboutWe {
	width: 100%;
	height: 324rpx;
	margin-top: 30rpx;
	background: #f7f7f7;
	border: 10rpx solid #d61223;
	border-radius: 20rpx;
	overflow: scroll;

}

.aboutInfo {
	padding: 20rpx;
	padding-top: 40rpx;
	box-orient: vertical;
	line-height: 40rpx;
	text-indent: 2em;
	overflow: scroll;
}

.moreProduct{
	padding-bottom: 10rpx;
}

.moreItem{
	border: 1px solid whitesmoke;
	margin: 2% 1%;
	padding-bottom: 15rpx;
	border-radius: 20rpx;
	overflow: hidden;
	width: 46%;
	display: inline-block;
}

.mItemHeader {
    height: 300rpx;
    width: 100%;
}

.mItemImage {
    background-image: url(http://www.peklm.cn/images/bg/content-1/bg-content-1-list.png);
    background-size: cover;
    height: 100%;
    width: 100%;
}

.mItemTitle {
    font-weight: bold;
    margin-top: 14rpx;
    font-size: 32rpx;
}

.mItemType {
    font-weight: lighter;
    font-size: 28rpx;
    margin: 5rpx 0;
}

.noMoreProduct{
	width: max-content;
	margin: 0 auto;
	text-align: center;
	color: #d61223;
	border: 1px solid #d61223;
	background: #d6122311;
	padding: 12rpx 16rpx;
	margin-bottom: 20rpx;
}

.aboutInfo view{
	display: block;
	font-size: 28rpx;
}
</style>
